<template>
  <view class="zmt-label-container">
    <!-- 富文本编辑器容器 -->
    <view id="aieditor-container" class="aieditor-container"></view>
  </view>
</template>

<script>
// 导入AiEditor
import { AiEditor } from 'aieditor';
import 'aieditor/dist/style.css';

export default {
  name: 'zmt-label',
  props: {
    // 传入的内容参数，格式为：{ html: '', markdown: '' }
    content: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // AiEditor实例
      aiEditor: null
    };
  },
  watch: {
    // 监听content变化，更新编辑器内容
    content: {
      deep: true,
      handler(newVal) {
        this.updateEditorContent();
      }
    }
  },
  mounted() {
    // 初始化富文本编辑器
    this.initAiEditor();
  },
  beforeDestroy() {
    // 销毁编辑器实例
    this.destroyAiEditor();
  },
  methods: {
    /**
     * 初始化富文本编辑器
     */
    initAiEditor() {
      const container = document.getElementById('aieditor-container');
      
      if (container) {
        // 创建AiEditor实例
        this.aiEditor = new AiEditor({
          element: container,
          placeholder: '请输入内容...',
          height: '200px',
          // 监听内容变化事件
          onChange: () => {
            this.emitContentChange();
          }
        });
        
        // 更新编辑器内容
        this.updateEditorContent();
      }
    },
    
    /**
     * 更新编辑器内容
     */
    updateEditorContent() {
      if (!this.aiEditor) return;
      
      if (this.content.markdown) {
        // 如果有markdown内容，优先使用markdown
        this.aiEditor.setMarkdownContent(this.content.markdown);
      } else if (this.content.html) {
        // 否则使用html内容
        this.aiEditor.setContent(this.content.html);
      }
    },
    
    /**
     * 销毁编辑器实例
     */
    destroyAiEditor() {
      if (this.aiEditor && typeof this.aiEditor.destroy === 'function') {
        this.aiEditor.destroy();
        this.aiEditor = null;
      }
    },
    
    /**
     * 获取当前编辑器的内容
     * @returns {Object} 包含编辑器内容的对象
     */
    getContent() {
      if (!this.aiEditor) return {};
      
      return {
        html: this.aiEditor.getHtml(),
        markdown: this.aiEditor.getMarkdown()
      };
    },
    
    /**
     * 触发内容变化事件
     */
    emitContentChange() {
      const content = this.getContent();
      this.$emit('content-change', content);
    }
  }
};
</script>
<style>
	.aie-content,.ProseMirror,.tiptap{height:250px !important;}
</style>
<style scoped>

.zmtmt-label-container {
  width: 100%;
  border-radius: 8rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

/* 富文本编辑器容器样式 */
.aieditor-container {
  width: 100%;
  min-height: 250px;
  border: 1px solid #f0f0f0;
  border-radius: 8rpx;
  overflow: hidden;
}
</style>
